/*
 * @Description: 轮播图-------弃用
 * @Author: ziwei.ma
 * @Date: 2019-07-22 17:59:38
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-07-22 17:59:38
 */

<template>
  <div
    class="slideshow-warpper"
    v-if="busPics.length>0"
  >
    <Slick
      :options="slickOptions"
      @afterChange="handleAfterChange"
      ref="slick"
    >
      <img
        class="bus-pic"
        :src="option.BUSPIC"
        v-for="(option,index) in busPics"
        :key="index"
      >
    </Slick>
    <div class="pic-number fontsize32">{{currentPage}}/{{busPics.length}}</div>
  </div>
</template>

<script>
import Slick from 'vue-slick'
import { getBusDetail } from '../api/api'
export default {
  components: {
    Slick
  },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1,
        accessibility: false,
        arrows: false,
        dots: false,
        centerMode: true,
        centerPadding: '0px',
        autoplay: false,
        infinite: false,
        onAfterChange: function (o) {
          console.log(o)
        } // 切换后的回调函数
      },
      busPics: [],
      currentPage: '1',
      totalPages: ''
    }
  },
  methods: {
    handleAfterChange(event, slick, currentSlide) {
      console.log('handleAfterChange', currentSlide)
      this.currentPage = currentSlide + 1
    },
    getPic() {
      getBusDetail().then(res => {
        this.busPics = res
        console.log('~~~~~~~~res', res)
      })
    }
  },
  mounted() {
    this.getPic()
  }
}
</script>

<style scoped>
.slideshow-warpper {
  position: relative;
  width: 750px;
  height: 400px;
}
.bus-pic {
  width: 750px;
  height: 400px;
}
.pic-number {
  position: absolute;
  color: #ffffff;
  width: 92px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: rgba(0, 0, 0, 0.17);
  border-radius: 20px;
  bottom: 34px;
  right: 32px;
}
</style>
